<!DOCTYPE html>
<html>

<head>
    <title>Bui 框架 富文本编辑器 SSM框架开发</title>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/toolbar.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/toolbar-2.0.0.js"></script>
    <style>
        body {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        .section-body {
            width: 100%;
            margin-top: 10px;
            padding-bottom: 20px;
        }

        .section-body h2 {
            margin-top: 12px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div style="margin-left: 80px;">
        <div class="section-content">
            <h1 class="section-title">传统按钮</h1>
            <div class="section-body">
                <div>
                    <input type="button" value="input button" />
                    <input type="button" value="input button" />
                    <input type="submit" value="submit button" />
                    <input type="submit" value="reset button" />
                </div>
            </div>
        </div>
        <div style="" class="section-content">
            <h1 class="section-title">基础用法（默认大小按钮）</h1>
            <div class="section-body">
                <div id="toolbar1"></div>
            </div>
        </div>
        <div class="section-content">
            <h1 class="section-title">基础用法（大按钮）</h1>
            <div class="section-body">
                <div id="toolbar2"></div>
            </div>
        </div>
        <div class="section-content">
            <h1 class="section-title">基础用法（小按钮）</h1>
            <div class="section-body">
                <div id="toolbar3"></div>
            </div>
        </div>
        <div class="section-content">
            <h1 class="section-title">基础用法（朴素按钮）</h1>
            <div class="section-body">
                <div id="toolbar4"></div>
            </div>
        </div>
        <div class="section-content">
            <h1 class="section-title">无文本图标按钮</h1>
            <div class="section-body">
                <div id="toolbar5"></div>
            </div>
        </div>
        <div class="section-content">
            <h1 class="section-title">分组按钮</h1>
            <div class="section-body">
                <div id="toolbar6"></div>
            </div>
        </div>
        <div class="section-content">
            <h1 class="section-title">动态按钮</h1>
            <div class="section-body">
                <div id="toolbar7"></div>
                <div style="height: 20px;"></div>
                <div id="toolbar8"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function myCallback(res) {
            alert(JSON.stringify(res));
        }
        /**事件集合**/
        var toolMethods = {
            test1: function (prs, opt) {
                console.log(opt);
                alert("test1");
            },
            btnClick: function (prs, opt) {
                console.log(prs);
                alert("btnClick");
            }
        };
        var toolMethods2 = {
            btnClick: function (prs, opt) {
                console.log(prs);
                alert("toolMethods2 btnClick");
            }
        };

        $B.DomUtils.onDomLoaded(function () {

            // $B.DomUtils.mouseleave($B.DomUtils.findbyId("b1"),function(e){
            //     console.log("mouse leave >>>>>>>>>>");
            // });

            var btnArr1 = [{
                id: 'btn1',
                text: '层级按钮',
                click: 'test1',
                children:[{
                    text: '子按钮1',
                    iconCls: 'fa-link-ext-alt',
                    methodsObject: 'toolMethods2',
                    click: 'btnClick'
                },{                  
                    text: '子按钮2',
                    iconCls: 'fa-lock-open-alt',
                    methodsObject: 'toolMethods2',
                    click: function(){
                        alert("子按钮2");
                    },
                    children:[{
                        text:'三级菜单',
                        iconCls: 'fa-doc-text',
                        click:function(){
                            alert("三级菜单");
                        }
                    }]
                },{
                    text:'测试',
                    iconCls: 'fa-ok-squared',
                    methodsObject: 'toolMethods2',
                    click: 'btnClick',
                    children:[{
                        text:'子菜单按钮',
                        iconCls: 'fa-off',
                        click:function(){
                            alert("子菜单按钮");
                        }
                    }]
                }]
            }, {
                id: 'btn2',
                color: '#409EFF',
                text: '主要按钮',
                iconCls: 'fa-download',
                methodsObject: 'toolMethods2',
                click: 'btnClick'
            }, {
                id: 'btn3',
                color: '#67C23A',
                iconCls: 'fa-ok',
                border: '1px solid #C4E0FF',
                text: '成功按钮',
                click: function (prs, opt) {
                    console.log(opt);
                    alert("成功按钮");
                }
            }, {
                color: '#E0F2FC',
                iconCls: 'fa-link',
                fontColor: '#F700AA',
                // iconColor:'#F79D00',
                radius: '12px',
                text: '测试按钮',
                click: function (prs, opt) {
                    console.log(prs);
                    alert("测试按钮");
                }
            }, {
                color: '#E6A23C',
                iconCls: 'fa-attention',
                border: '1px solid #C4E0FF',
                radius: '10px',
                text: '警告按钮',
                click: function (prs, opt) {
                    console.log(prs);
                    alert("警告按钮");
                }
            }, {
                id: 'btn6',
                color: '#F56C6C',
                iconCls: ' fa-cancel',
                disabled: true,
                border: '1px solid #C4E0FF',
                text: '危险按钮',
                click: function (prs, opt) {
                    console.log(opt);
                    alert("危险按钮");
                }
            },{
                color: '#6A62FF',
                iconCls: 'fa-cog-alt',
                border: '1px solid #C4E0FF',
                text: '更多操作',
                children:[
                    {
                        text: '子按钮1',
                        iconCls: 'fa-link-ext-alt',
                        methodsObject: 'toolMethods2',
                        click: 'btnClick'
                    },{                  
                        text: '子按钮2',
                        iconCls: 'fa-lock-open-alt',
                        methodsObject: 'toolMethods2',
                        click: function(){
                            alert("子按钮2");
                        },
                        children:[{
                            text:'三级菜单',
                            iconCls: 'fa-doc-text',
                            click:function(){
                                alert("三级菜单");
                            }
                        }]
                    },{
                        text:'测试',
                        iconCls: 'fa-ok-squared',
                        methodsObject: 'toolMethods2',
                        click: 'btnClick',
                        children:[{
                            text:'子菜单按钮',
                            iconCls: 'fa-off',
                            click:function(){
                                alert("子菜单按钮");
                            }
                        }]
                    }]
            }];

            var ctrTools = new $B.Toolbar("toolbar1", {
                align: 'left', //对齐方式，默认是left 、center、right
                style: 'normal', // plain / min  / normal /  big                
                showText: true, // min 类型可以设置是否显示文字
                methodsObject: 'toolMethods',
                border: '1px solid #C4E0FF',
                radius: '6px',
                buttons: btnArr1
            });

            new $B.Toolbar("toolbar2", {
                align: 'left', //对齐方式，默认是left 、center、right
                style: 'big', // plain / min  / normal /  big                
                showText: true, // min 类型可以设置是否显示文字
                methodsObject: 'toolMethods',
                border: '1px solid #C4E0FF',
                radius: '6px',
                subMenuPosition:'bottom',
                buttons: btnArr1
            });

            new $B.Toolbar("toolbar3", {
                align: 'left', //对齐方式，默认是left 、center、right
                style: 'min', // plain / min  / normal /  big                
                showText: true, // min 类型可以设置是否显示文字
                methodsObject: 'toolMethods',
                border: '1px solid #C4E0FF',
                radius: '6px',
                buttons: btnArr1
            });

            new $B.Toolbar("toolbar4", {
                align: 'left', //对齐方式，默认是left 、center、right
                style: 'plain', // plain / min  / normal /  big                
                showText: true, // min 类型可以设置是否显示文字
                methodsObject: 'toolMethods',
                border: 'none',
                radius: '6px',
                buttons: btnArr1
            });

            new $B.Toolbar("toolbar5", {
                align: 'left', //对齐方式，默认是left 、center、right                             
                showText: false, // min 类型可以设置是否显示文字
                style: 'normal', // plain / min  / normal /  big
                methodsObject: 'toolMethods',
                border: 'solid 1px #7EF2D3',
                radius: '15px',
                buttons: btnArr1
            });

            //分组按钮实现
            var buttons = [[
                    {
                        color: '#409EFF',
                        text: '按钮1',
                        iconCls: 'fa-plus-circled',
                        methodsObject: 'toolMethods2',
                        click: 'btnClick'
                    },
                    {
                        color: '#409EFF',
                        text: '按钮2',
                        iconCls: 'fa-floppy',
                        methodsObject: 'toolMethods2',
                        click: 'btnClick'
                    }
                ], [{
                    color: '#409EFF',
                    text: '按钮3',
                    iconCls: 'fa-trash-empty',
                    methodsObject: 'toolMethods2',
                    click: 'btnClick'
                },
                {
                    color: '#409EFF',
                    text: '按钮4',
                    iconCls: 'fa-down-circle',
                    methodsObject: 'toolMethods2',
                    click: 'btnClick'
                }

                ], [{
                    color: '#409EFF',
                    text: '按钮5',
                    iconCls: 'fa-up-circle',
                    methodsObject: 'toolMethods2',
                    click: 'btnClick',
                    children:[
                    {
                        text: '子按钮1',
                        iconCls: 'fa-link-ext-alt',
                        methodsObject: 'toolMethods2',
                        click: 'btnClick'
                    },{                  
                        text: '子按钮2',
                        iconCls: 'fa-lock-open-alt',
                        methodsObject: 'toolMethods2',
                        click: function(){
                            alert("子按钮2");
                        },
                        children:[{
                            text:'三级菜单',
                            iconCls: 'fa-doc-text',
                            click:function(){
                                alert("三级菜单");
                            }
                        }]
                    },{
                        text:'测试',
                        iconCls: 'fa-ok-squared',
                        methodsObject: 'toolMethods2',
                        click: 'btnClick',
                        children:[{
                            text:'子菜单按钮',
                            iconCls: 'fa-off',
                            click:function(){
                                alert("子菜单按钮");
                            }
                        }]
                    }]
                },
                {
                    color: '#409EFF',
                    text: '按钮6',
                    iconCls: 'animate-spin fa-spin4',
                    iconColor: '#2CFC00',
                    methodsObject: 'toolMethods2',
                    click: 'btnClick'
                }
            ]];

            new $B.Toolbar("toolbar6", {
                align: 'left', //对齐方式，默认是left 、center、right                             
                showText: true, // min 类型可以设置是否显示文字
                style: 'normal', // plain / min  / normal /  big
                methodsObject: 'toolMethods',
                subMenuPosition:'bottom',
                buttons: buttons
            });

            var newIds =[];
            var dyTool = new $B.Toolbar("toolbar8", {
                    align: 'left', //对齐方式，默认是left 、center、right                             
                    showText: true, // min 类型可以设置是否显示文字
                    style: 'normal', // plain / min  / normal /  big                   
                    buttons: [
                        {
                            id:'btn_1',
                            color: '#C16FF0',
                            text: '按钮1',
                            iconCls: 'fa-print',
                            click: function(){
                               console.log("aaa");
                               var elObj = $B.DomUtils.wrap(this);
                               console.log(elObj);
                               elObj.propData("test","1111");
                               var l = elObj.propData("1111");
                               console.log(l);
                            }
                        },
                        {
                            id:'btn_2',
                            color: '#34E0B9',
                            text: '按钮2',
                            iconCls: 'fa-male-1',
                            click: function(){
                                alert("按钮2");
                            }
                        }
                    ]
                });

           var buttonArray = [[
                    {
                        color: '#8B7EFF',
                        text: '新增按钮',
                        iconCls: 'fa-plus-circled',
                        click: function(){
                            let id = $B.getUUID();
                            let opt = [{
                                id:id,
                                color: '#C16FF0',
                                text: 'new 1',
                                iconCls: 'fa-spin2 animate-spin',
                                click: function(){
                                    alert("new 1");
                                }
                            }];
                            if(newIds.length === 1){
                                opt[0].children = [{
                                    color: '#C16FF0',
                                    text: 'new child1',
                                    iconCls: 'fa-spin2 animate-spin'
                                }];
                            }
                            newIds.push(id);
                            dyTool.addButtons(opt);
                        }
                    },{
                        color: '#8B7EFF',
                        text: '删除按钮',
                        iconCls: 'fa-minus-circled',
                        click: function(){
                            if(newIds.length > 0){
                                dyTool.delButtons(newIds);
                            }
                            newIds = [];
                        }
                    }],[{
                        color: '#8B7EFF',
                        text: '禁用按钮',
                        iconCls: 'fa-cancel-circled',
                        click: function(){
                            dyTool.disableButtons(['btn_1','btn_2']);
                        }
                    },{
                        color: '#8B7EFF',
                        text: '启用按钮',
                        iconCls: 'fa-ok-circled',
                        click: function(){
                            dyTool.enableButtons(['btn_1','btn_2']);
                        }
                    }
                ]];
                new $B.Toolbar("toolbar7", {
                    align: 'left', //对齐方式，默认是left 、center、right                             
                    showText: true, // min 类型可以设置是否显示文字
                    style: 'normal', // plain / min  / normal /  big
                    buttons: buttonArray
                });
        });
    </script>


</html>